<template>
  <div class="app-main-container">
    <!-- <div class="app-main-title">会员配置</div> -->
    <div v-if="meta.indexOf('OptionVipAdd') > -1" class="doumee-table-buttons">
      <el-button v-if="meta.indexOf('OptionVipAdd') > -1" type="primary" @click="toAmountAdd(0)">新增</el-button>
    </div>
    <el-table
      :data="listAmount"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="会员充值固定金额配置" prop="name" min-width="300" />
      <el-table-column align="center" label="状态" min-width="200">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isAllow" v-preventReClick :active-value="'1'" :inactive-value="'0'" :disabled="meta.indexOf('OptionVipEdit') == -1" @change="changeConfig($event, scope.row.id, 'isAllow', 'amount')" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序码" prop="sort" min-width="200" />
      <el-table-column align="center" width="1" />
      <el-table-column label="操作" align="center" fixed="right" min-width="200">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button v-if="meta.indexOf('OptionVipEdit') > -1" v-preventReClick type="text" @click="toAmountAdd(1, scope.row)">编辑</el-button>
            <el-button v-if="meta.indexOf('OptionVipDel') > -1" v-preventReClick type="text" style="color: red;" @click="toDeleteAmount(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex-cc doumee-pagination">
      <el-pagination
        :hide-on-single-page="true"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>

    <el-table
      :data="listDiscount"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="优惠改价" prop="name" min-width="300" />
      <el-table-column align="center" label="是否支持修改">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isEdit" v-preventReClick :active-value="'1'" :inactive-value="'0'" @change="changeConfig($event, scope.row.id, 'isEdit', 'discount')" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="说明" prop="description" min-width="300" />
    </el-table>

    <div style="height: 40px" />

    <el-table
      :data="listWX"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="微信场地" width="500">
        <template slot-scope="scope">
          <div class="flex-c">
            <div style="flex:3;text-align: left;display: block;">{{ scope.row.name }}</div>
            <el-input v-model="scope.row.value" style="flex:1" placeholder="" size="normal" @change="editWXItem(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="说明" prop="description" min-width="500" />
    </el-table>

    <!-- 新增节假日配置 -->
    <el-dialog :close-on-click-modal="modalDialog" :lose-on-press-escape="modalDialog" title="新增节假日配置" :visible.sync="showAmountAddData">
      <el-form ref="refForm" :rules="rules" :model="amountAddData" label-width="100px">
        <el-form-item label="固定金额" prop="name">
          <el-input v-model="amountAddData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="amountAddData.isAllow" :active-value="'1'" :inactive-value="'0'" />
        </el-form-item>
        <el-form-item label="排序码" prop="sort">
          <el-input v-model="amountAddData.sort" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAmountAddData = false">取 消</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="formOnSubmit('refForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { configList, configUpdate, configAdd, configDelete } from '@/api'
export default {
  name: 'OptionVip',
  data() {
    return {
      modalDialog: this.$store.state.app.dialog,
      subLoading: false,
      meta: [],
      listAmount: [],
      listDiscount: [],
      listWX: [],
      pagination: {
        firstQueryTime: new Date(),
        page: 1,
        rows: 10
      },
      total: 0,
      amountAddEdit: 0,
      showAmountAddData: false,
      amountAddData: {
        name: '',
        isAllow: '1',
        sort: '',
        type: '5'
      },
      rules: {
        name: [
          { required: true, message: '请输入固定金额', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getConfig()
  },
  methods: {
    // 获取配置项
    getConfig() {
      const { pagination } = this
      // 会员充值配置
      configList({ param: { type: '5' }}).then(res => {
        this.listAmount = res.recordList
        this.total = res.totalCount
        const t = res.totalCount / 10
        const count = Number(t.toFixed(0)) + (t - t.toFixed(0) > 0 ? 1 : 0)
        this.total = count * 10
      })
      // 优惠改价/赠送金额配置
      configList({ param: { type: '6' }}).then(res => {
        if (res.errorCode === '000000') {
          this.listDiscount = res.recordList
        }
      })
      // 微信场地配置
      configList({ param: { type: '7' }}).then(res => {
        if (res.errorCode === '000000') {
          this.listWX = res.recordList
        }
      })
    },
    // 添加/编辑会员充值配置
    toAmountAdd(type, data) {
      this.amountAddEdit = type
      this.showAmountAddData = true
      if (type) {
        this.amountAddData = data
      }
    },
    formOnSubmit(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.confirmAmountAdd()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 确认添加/编辑会员充值配置
    confirmAmountAdd() {
      const { amountAddData: param, amountAddEdit } = this
      if (amountAddEdit) {
        this.subLoading = true
        // 编辑
        configUpdate({ param }).then(res => {
          this.subLoading = false
          if (res.errorCode === '000000') {
            this.getConfig()
            this.showAmountAddData = false
            this.amountAddData = {
              name: '',
              isAllow: '1',
              sort: '',
              type: '5'
            }
          }
        }, () => {
          this.subLoading = false
        })
      } else {
        // 新增
        configAdd({ param }).then(res => {
          this.subLoading = false
          if (res.errorCode === '000000') {
            this.getConfig()
            this.showAmountAddData = false
            this.amountAddData = {
              name: '',
              isAllow: '1',
              sort: '',
              type: '5'
            }
          }
        }, () => {
          this.subLoading = false
        })
      }
    },
    // 删除会员充值配置
    toDeleteAmount(id) {
      this.$confirm('此操作将删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        configDelete({ param: { id }}).then(res => {
          if (res.errorCode === '000000') {
            this.$message.success('删除成功')
            this.getConfig()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 切换 会员充值配置状态、优惠改价/赠送金额是否支持修改
    changeConfig(data, id, name, type_) {
      const param = { id }
      param[name] = data
      switch (type_) {
        case 'amount':
          param.type = '5'
          break

        case 'discount':
          param.type = '6'
          break

        default:
          break
      }
      configUpdate({ param }).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success('修改成功')
        }
      })
    },
    // 修改微信场地
    editWXItem(param) {
      configUpdate({ param }).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success('修改成功')
        }
      })
    }
  }
}
</script>
